<template>
	<div class="ma-banner-3d" @touchstart="onStart" @touchmove="onMove">
		<div 
		class="ma-banner-3d-box" 
		:style="{ transform: 'rotateX(' + rotateX + 'deg) rotateY(' + rotateY + 'deg)',width,height }"
		>
			<image
			v-for="item,index in imgList"
			:style="{ transform: 'rotateY(' + index * angle +'deg) translateZ(' + translateZ + ')' }"
			src="../../../static/img/qrcode.png" 
			mode="aspectFill"
			@tap="onSelect(index)"
			>
			</image>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			//轮播图图片列表
			imgList: {
				type: Array,
				default: [0,1,2,3,4,5]
			},
			//图片的宽度
			width: {
				type: String,
				default: '40vw'
			},
			//图片的高度
			height: {
				type: String,
				default: '30vw'
			}
		},
		data(){
			return {
				isRotating: false, //是否正在旋转中
				rotateY: 0 ,//顺时针逆时针旋转的角度
				rotateX: -20 ,//顺着X轴旋转的角度
				startX: 0 //轮播图滑动的起始坐标
			}
		},
		methods: {
			onRotate(angle = this.angle){
				//angle正数顺时针旋转，负数逆时针旋转
				if(this.isRotating) return;
				this.isRotating = true;
				setTimeout(() => {
					this.isRotating = false;
				},500)
				this.rotateY -= angle;
			},
			onStart(e){
				this.startX = e.changedTouches[0].clientX;
			},
			onMove(e){
				let moveX = e.changedTouches[0].clientX;
				let x = this.startX - moveX;
				const DISTANCE = 40;
				if(x > DISTANCE) { 
					this.startX = moveX;
					this.onRotate();
				}
				if(x < -(DISTANCE)) {
					this.startX = moveX;
					this.onRotate(-this.angle);
				}
			},
			onSelect(index){
				//当前旋转的角度，负数是已经顺时针旋转过了，正数是逆时针旋转过了
				let current_angle;
				let num = Math.floor(Math.abs(this.rotateY) / 360);
				if(this.rotateY >= 360){
					current_angle = this.rotateY - 360 * num;
				}else if(this.rotateY <= -360){
					current_angle = this.rotateY + 360 * num;
				}else current_angle = this.rotateY;
				
				//当前选中的图片需要顺时针旋转多少角度才能到正面
				let current_need_angle = index * this.angle;
				
				//计算后最终需要顺时针旋转的角度
				let rotate_angle = current_need_angle + current_angle;
				
				if(rotate_angle > 180) rotate_angle = -(360 - rotate_angle);
				else if(rotate_angle < -180) rotate_angle = 360 + rotate_angle;
				else if(rotate_angle == -180) rotate_angle = 180;
				if(rotate_angle !== 0) this.onRotate(rotate_angle);
			}
		},
		computed: {
			//旋转角度
			angle(){
				if(this.imgList.length == 0) return 360;
				else return 360 / this.imgList.length;
			},
			translateZ(){
				// return this.imgList.length * 6.5 + 'vw';
				if(this.imgList.length == 0) return '0px';
				else return '165px';
			}
		}
	}
</script>

<style lang="scss">
	.ma-banner-3d {
		perspective: 1000px;
		// height: 40vw;
		width: 100vw;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 15vw 0;
		&-box{
			transition-duration: 1s;
			height:30vw;
			width: 40vw;
			position: relative;
			transform-style: preserve-3d;
			
			image{
				position: absolute;
				height: 100%;
				width: 100%;
				display: block;
				cursor: pointer;
			}
		}
	}
</style>
